import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///渐变 APP
class JobDetail extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => JobDetailState();
}

class JobDetailState extends State<JobDetail> {
  AppBarWidget appBar;
  ScrollController scrollController;
  PositionedBtnWidget roundLeftBtn;
  PositionedBtnWidget rectLeftBtn;
  PositionedBtnWidget moreRightBtn;
  @override
  void initState() {
    super.initState();
    appBar = AppBarWidget();
    scrollController = ScrollController();
    roundLeftBtn = PositionedBtnWidget(
      btnTop: 34,
      left: 20,
      opacity: 1,
      image: "assets/images/sp02.png",
      actionFunction: () {
        print('round left');
      },
    );
    rectLeftBtn = PositionedBtnWidget(
      btnTop: 34,
      left: 20,
      opacity: 0,
      image: "assets/images/sp02.png",
      actionFunction: () {
        print('rect left');
      },
    );
    moreRightBtn = PositionedBtnWidget(
      btnTop: 34,
      right: 20,
      opacity: 0,
      image: "assets/images/sp02.png",
      actionFunction: () {
        print('rect left');
      },
    );
  }

  double maxOffset = 80.0;

  scrollViewDidScrolled(double offSet) {
    //print('scroll offset ' + offSet.toString());

    ///appbar 透明度
    double appBarOpacity = offSet / maxOffset;
    double halfPace = maxOffset / 2.0;

    ///圆形按钮透明度
    double roundOpacity = (halfPace - offSet) / halfPace;

    ///方形按钮透明度
    double rectOpacity = (offSet - halfPace) / halfPace;
    double moreOpacity = (offSet - halfPace) / halfPace;
    if (appBarOpacity < 0) {
      appBarOpacity = 0.0;
    } else if (appBarOpacity > 1) {
      appBarOpacity = 1.0;
    }

    if (roundOpacity < 0) {
      roundOpacity = 0.0;
    } else if (roundOpacity > 1) {
      roundOpacity = 1;
    }

    if (rectOpacity < 0) {
      rectOpacity = 0.0;
    } else if (rectOpacity > 1) {
      rectOpacity = 1.0;
    }
    if (moreOpacity < 0) {
      moreOpacity = 0.0;
    } else if (moreOpacity > 1) {
      moreOpacity = 1.0;
    }
    //print('roundOpacity $roundOpacity rectOpacity $rectOpacity');

    ///更新透明度
    if (appBar != null && appBar.updateAppBarOpacity != null) {
      appBar.updateAppBarOpacity(appBarOpacity);
    }

    if (roundLeftBtn != null && roundLeftBtn.updateOpacity != null) {
      roundLeftBtn.updateOpacity(roundOpacity);
    }
    if (rectLeftBtn != null && rectLeftBtn.updateOpacity != null) {
      rectLeftBtn.updateOpacity(rectOpacity);
    }
    if (moreRightBtn != null && moreRightBtn.updateOpacity != null) {
      moreRightBtn.updateOpacity(moreOpacity);
    }
  }

  @override
  Widget build(BuildContext context) {
    double bottomBarHeight = MediaQuery.of(context).padding.bottom;
    bottomBarHeight += 49;

    return Scaffold(
      body: Stack(
        children: <Widget>[
          ///监听滚动
          NotificationListener(
            onNotification: (notification) {
              if (notification is ScrollUpdateNotification &&
                  notification.depth == 0) {
                ///滑动通知
                scrollViewDidScrolled(notification.metrics.pixels);
              }

              ///通知不再上传
              return true;
            },
            child: CustomScrollView(
              controller: scrollController,
              slivers: <Widget>[
                SliverToBoxAdapter(
                  child: Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          width: 750,
                          padding: const EdgeInsets.fromLTRB(20, 82, 20, 12),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: NetworkImage(
                                  'https://randomuser.me/api/portraits/men/43.jpg'),
                            ),
                          ),
                          child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Container(
                                  child: Text(
                                    "标题兼职标题标题兼职标题",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 24),
                                  ),
                                ),
                                Container(
                                  child: Text(
                                    "工资",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 20),
                                  ),
                                ),
                                Container(
                                  child: Text(
                                    "地理位置",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 12),
                                  ),
                                )
                              ]),
                        ),
                        Container(
                          padding: const EdgeInsets.fromLTRB(20, 82, 20, 12),
                          decoration: BoxDecoration(
                              //设置了decoration的color，就不能设置Container的color。
                              ///边框
                              border: Border(
                                  bottom: BorderSide(
                                      color: Colors.indigoAccent[100],
                                      width: 8,
                                      style: BorderStyle.solid))),
                        ),
                        Container(
                          padding: const EdgeInsets.fromLTRB(20, 82, 20, 12),
                        ),
                      ],
                    ),
                  ),
                ),
                SliverFixedExtentList(
                  itemExtent: 80,
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      // 创建列表项
                      return Container(
                        alignment: Alignment.center,
                        color: Colors.blue,
                        child: Text('list item $index'),
                      );
                    },
                    // 50个列表项
                    childCount: 50,
                  ),
                )
              ],
            ),
          ),
          appBar,
          rectLeftBtn,
          roundLeftBtn,
          moreRightBtn,
        ],
      ),
    );
  }
}

///按钮
// ignore: must_be_immutable
class PositionedBtnWidget extends StatefulWidget {
  double btnTop;
  double right;
  double left;
  String image;
  double opacity;

  ///更新透明度
  Function updateOpacity;

  ///要触发的事件
  Function actionFunction;

  PositionedBtnWidget(
      {this.btnTop,
      this.right,
      this.left,
      this.opacity,
      this.image,
      this.actionFunction});

  @override
  State<StatefulWidget> createState() {
    return PositionedBtnState();
  }
}

class PositionedBtnState extends State<PositionedBtnWidget> {
  double btnTop;
  double right;
  double left;
  String image;
  double btnOpacity;

  @override
  void initState() {
    super.initState();

    if (widget != null) {
      btnTop = widget.btnTop != null ? widget.btnTop : null;
      right = widget.right != null ? widget.right : null;
      left = widget.left != null ? widget.left : null;
      image = widget.image != null ? widget.image : null;
      btnOpacity = widget.opacity != null ? widget.opacity : null;
    }
  }

  @override
  Widget build(BuildContext context) {
    ///更新透明度
    if (widget != null && widget.updateOpacity == null) {
      widget.updateOpacity = (double opacity) {
        setState(() {
          btnOpacity = opacity;
        });
      };
    }

    return Positioned(
      top: btnTop,
      right: right,
      left: left,
      child: Opacity(
        opacity: btnOpacity,
        child: IconButton(
          icon: Image.asset(image),
          onPressed: () {
            if (widget != null && widget.actionFunction != null) {
              widget.actionFunction();
            }
          },
        ),
      ),
    );
  }
}

///app barb
class AppBarWidget extends StatefulWidget {
  Function updateAppBarOpacity;

  @override
  State<StatefulWidget> createState() => AppBarState();
}

class AppBarState extends State<AppBarWidget> {
  double opacity = 0;

  @override
  void initState() {
    if (widget != null) {
      print('AppBarState init');
      widget.updateAppBarOpacity = (double op) {
        setState(() {
          opacity = op;
        });
      };
    }

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    double appBarHeight = MediaQuery.of(context).padding.top;
    appBarHeight += 44;

    return Opacity(
      opacity: opacity,
      child: Container(
        height: appBarHeight,
        child: AppBar(
          title: Text(
            '标题兼职标题标题兼职标题',
            style: TextStyle(color: Colors.white),
          ),
          centerTitle: true,
          backgroundColor: Colors.deepOrange,
        ),
      ),
    );
  }
}
